<template>
  <div class="list">
    <div class="nbv">
        <h3 @click="dian"  :class="{active:qiang}">正在抢购</h3>
        <h3 @click="dian2" :class="{active:shang}">上新预告</h3>
    </div>
    <div class="good" v-for="(item,index) in liebiao" :key="index">
      <div class="img-box">
        <img :src="item.picture" alt="">
      </div>
      <div class="text">
        <div class="name">{{item.name}}</div>
        <div class="bb">爆爆团价</div>
         <div class="price">¥{{item.min_price}}<span :class="{ave:item.promotion_info!=''}">{{item.promotion_info}}</span></div>
        <!-- <div class="desc">{{item.desc}}</div> -->
    
      
      </div>
  <div>
          <div class="btn" @click="qiangg(item)">{{item.status ?'到手':'赶快抢'}}</div>
          <div class="saled" @click=" yuan(item)"><span>已售{{item.month_saled}}份</span></div>
  </div>
    </div>
    
  </div>
</template>

<script scoped>
//所有本地图片 必须通过import导入 以后才可以在 js 数据中使用( import导入的图片会自动转换为base64编码的字符串, 这个字符串唯一代表该图标 )
import {tuanlist} from '../../../api/index'
import eventBus from '../../../utils/eventBus'
export default {
  data(){ //定义响应式数据
    return {
        yuanjia:0,
        currentindex:1,
        qiang:true,
        shang:false, 
        liebiao:[],
        liebiao2:[],
        liebiao3:[],

    }
  },
  methods: {
     qiangg(item){
      console.log(item)
      item.status=!item.status
     },
       dian(){
        this.qiang=true
        this.shang=false
         
       this.liebiao=this.liebiao2
    },
     dian2(){
        this.qiang=false
        this.shang=true
       this.liebiao=this.liebiao3


    },
        liang(index){
        this.currentindex=index
    },
      yuan(item){
      console.log(yuanjia)
        this.yuanjia=item.min_price*parseInt(item.promotion_info)
     }
 
  },
   mounted(){
       tuanlist({status:0}).then((res)=>{
        // console.log(res.data)
      // console.log(res.data.list);
      this.liebiao=res.data.list
      this.liebiao2=res.data.list
    })
      tuanlist({status:1}).then((res)=>{
        // console.log(res.data.list)
        this.liebiao3=res.data.list
    })
       eventBus.$on('tranferData',(data)=>{
            console.log('接收到数据:', data );
             this.liebiao=data
        })

}
}
</script>

<style scoped>
    .list{
        margin: 10px;
    }
    .list .good{
        display: flex;
        height: 100px;
        /* background-color: lightblue; */
        margin: 10px 0;
        border-radius: 5px;
    }
    .list .good .img-box{
      width: 120px;
      margin-right: 10px;
    }
    .list .good .img-box img{
      width: 100%;
    }
    .list .good .text{
      flex:1;
    }
    .list .bb{
      font-size: 14px;
      color: #ee8776;
    }
    .list .price{
      color: #ed6f5a;
    }
      .ave{
      font-size: 10px;
      color:#f5bab0;
      border: 1px solid #f5bab0;
     }
    .list .name{
      font-size: 18px;
      font-weight:bold ;
    }
    .nbv{
        width: 100%;
        display: flex;
        justify-content: space-between;
        color: rgb(231, 165, 165);
    }
    .saled span{
        font-size:10px;
        color: #ef8776;
    }
    .btn{
      width: 50px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      background: #ea3924;
      color: white;
      margin-top:20px ;
      border-radius: 15px;
    }
    .active{
      color: red;
      font-weight: bold;
    }

</style>